<template>
    <!-- 宽200 -->
    <div class="img-list-container" :style="{width:`${selfWidth}px`}">
        <header class="search">
            <a-input v-model:value="state.searchVal" placeholder="搜索组件">
                <template #suffix>
                    <SearchOutlined />
                </template>
            </a-input>
        </header>

        <div class="img-list">
            <template v-for="item in chartConfig">
                <div 
                    class="item-box"
                    @dblclick="handleDblClick(item)"
                    draggable
                    @dragstart="dragStartHandle($event,item)"
                    @dragend="dragEndtHandle"
                >
                    <header>
                        <div class="spin">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <span class="title">{{ item.title }}</span>
                    </header>
                    <div class="img-show">
                        <div>
                            <img :src="getUrl(item)" alt="">
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { fetchMenuImgUrl } from '@/utils';
import { useDataViewLayoutStore } from '@/stores/dataviewLayout';
import { storeToRefs } from 'pinia';
import {componentInstall} from '@/utils/dataview'
import {createComponent, fetchChartComponent,fetchConfigComponent} from '@/views/dataview/packages/index'
import type { ConfigType } from '@/views/dataview/packages/type';
import { useDataViewStore } from '@/stores/dataview';
import { omit } from 'lodash';
import { EditCanvasTypeEnum } from '@/stores/types';
import { DragKeyEnum } from '@/const';

const props = withDefaults(defineProps<{
    chartConfig:any[]
    totalWidth?:number|string
    selfWidth?:number|string
}>(),{
    totalWidth:330,
    selfWidth:200
})

const dataviewStore = useDataViewStore()
const dataViewLayoutStore = useDataViewLayoutStore()
const { dataviewLayoutState } = storeToRefs(dataViewLayoutStore)

const state =reactive({
    searchVal:''
})

const getUrl = (config:any)=>{
    return fetchMenuImgUrl(config)
}

const handleDblClick =async (item:ConfigType)=>{
    // 动态注册
    componentInstall(item.chartKey,fetchChartComponent(item))
    componentInstall(item.conKey,fetchConfigComponent(item))
    const newComponent = await createComponent(item) //创建新组件必要数据
    if(newComponent.redirectComponent){
        // 字体图标和图片组件配置
    }
    // 添加
    dataviewStore.addComponnetList(newComponent,false,true)
    // 选中
    dataviewStore.setTargetSelectChart(newComponent.id)
}

const dragStartHandle = (e:DragEvent,item:ConfigType)=>{
    if(item.disabled) return
    componentInstall(item.chartKey,fetchChartComponent(item))
    componentInstall(item.conKey,fetchConfigComponent(item))
    // omit删除图片资源，并设置到拖拽数据中
    // dataTransfer保存拖拽数据
    e.dataTransfer?.setData(DragKeyEnum.DRAG_KEY,JSON.stringify(omit(item,['image'])))
    dataviewStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE,true)
}

const dragEndtHandle = (e:DragEvent)=>{
    dataviewStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE,false)
}
</script>

<style lang="scss" scoped>
.img-list-container {
    .search{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        padding-right: 5px;
    }
    .img-list{
        width: 100%;
        height: calc(100vh - 85px);
        overflow-y: auto;
        padding: 10px;

        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::-webkit-scrollbar {
            opacity: 1;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;
            &:hover {
                background-color: #ccc;
            }
        }
        .item-box{
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            box-shadow: 5px 5px 10px #e6e6e6,
                       -5px -5px 10px #ffffff;
            transition: all 0.3s ease;
            &:hover {
                transform: translateY(-2px);
                box-shadow: 7px 7px 14px #e6e6e6,
                           -7px -7px 14px #ffffff;
            }
            header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 5px 10px;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(5px);
                border-bottom: 1px solid rgba(232, 232, 232, 0.5);
                .spin{
                    display: flex;
                    align-items: center;
                    span{
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background: white;
                        border-radius: 50%;
                        margin-right: 5px;
                        &:first-child{
                            background-color: red;
                        }
                        &:nth-child(2){
                            background-color: orange;
                        }
                        &:last-child{
                            background-color: green;
                        }
                    }
                }
                .title{
                    font-size: 12px;
                    white-space: nowrap;
                }
            }
            .img-show{
                padding: 10px 15px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.5);
                cursor: pointer;
                
                & > div {
                    border-radius: 15px;
                    overflow: hidden;
                    
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>